import React from 'react';
import { Text } from 'react-native';
import { colors } from 'bee/themes';
import { px2dp } from 'bee/utils';

// @flow
type Props = {
  radius?: number,
  bgc?: string,
  title?: string,
};

class Circle extends React.Component<Props> {
  static defaultProps = {
    radius: px2dp(32),
    title: '',
    bgc: colors[1003],
  };

  render() {
    const { title, radius, bgc } = this.props;

    return (
      <Text
        style={{
          width: radius,
          height: radius,
          borderRadius: radius / 2,
          backgroundColor: bgc,
          color: colors.white,
          textAlign: 'center',
        }}
      >
        {title}
      </Text>
    );
  }
}

export default Circle;
